<<<<<<< HEAD
<template>
   <el-card class="box-card">
    <template #header>

      <div class="card-header">
    
       <p>课程列表</p>
      </div>
    </template>
    <div class="aaa">
    <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="date" label="序号" width="100" />
    <el-table-column prop="name" label="课程名称" width="180" />
    <el-table-column prop="state" label="创建时间" width="200" />
 
    <el-table-column prop="citys" label="可见状态" width="100"><el-switch v-model="value1" /></el-table-column>
      
    <el-table-column prop="address" label="操作" >
    <el-button><el-icon><EditPen /></el-icon></el-button>
    <el-button><el-icon><Files /></el-icon></el-button>
    <el-button><el-icon><Monitor /></el-icon></el-button>
    <el-button><el-icon><School /></el-icon></el-button>
    
    
      </el-table-column>

    </el-table>
    </div>
  </el-card>

</template>

<script>

import {School,Files,Monitor,EditPen} from '@element-plus/icons-vue'

export default {
  data(){
    return{
      tableData:[
        {date:1,name:"Java程序设计",state:"2020-12-12",},
        {date:2,name:"MySQL数据库技术",state:"2021-12-11"},
        {date:3,name:"Web前端开发基础",state:"2021-12-11"},
        {date:4,name:"web前端项目开发实战",state:"2021-12-11"}
      ]
    }
  },
   components:{
      School,
      Files,
      Monitor,
      EditPen,

      
 },

}

</script>


<style>
p{
  text-align: left;
  font-size: 20px;
}
.aaa{
  text-align: center;
  font-size: 40px;
  height: 300px;
}




</style>
=======
<template>

    <el-main>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>课程列表</span>
            </div>
        </template>
            <div style="height:200px;text-align:center;">
                <template>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="Date" width="180" />
                    <el-table-column prop="name" label="Name" width="180" />
                    <el-table-column prop="address" label="Address" />
                </el-table>
                </template>
            </div>
    </el-card>
    </el-main>
</template>

<script>
export default {
        data(){
            return{ 
                tableData:[
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                ]
            }
        }
        

}
</script>

<style>
.el-main{
    text-align: left;
}
</style>
>>>>>>> 00aa09062a11b6639155e15f0dc41c4a7b4987be
